<?
	require_once('../Extras/Functions.php');
	CheckSession();
	
	$mysqli = ConectObj();
	$result = $mysqli->query("SELECT ID, Colonia, Tierra, Civil, Pers FROM cols ORDER BY Tierra DESC");
	while($data = $result->fetch_object()){
		$colonias[$data->Imperio][]=$data;
		$Imperios[$data->Imperio]['Tierra'] += $data->Tierra;
		array_push($Imperios[$data->Imperio]['Col'],array('Colonia'=>$data->Colonia,'Tierra'=>$data->Tierra));
	}

	$arrs = serialize($Imperios);
	$arrs = urlencode($arrs);
?>
<!DOCTYPE HTML>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>Untitled Document</title>
	<script>
		$(document).ready(function(){
			$("#image").draggable({
				stop: function(e){
					//Si la parte izquierda de la imagen es mayor a la izquierda del contenedor...
					if( $('#image').position().left > $('#imageCanvas').position().left)
						$('#image').offset({left: $('#imageCanvas').position().left});
					//Parte superior
					if( $('#image').position().top > $('#imageCanvas').position().top)
						$('#image').offset({top: $('#imageCanvas').position().top});
					//Parte derecha
					if( $('#image').position().left+$('#image').width() < $('#imageCanvas').position().left+$('#imageCanvas').width()+10) //+Borde de ImageCanvas
						$('#image').offset({left: $('#imageCanvas').position().left - $('#image').width() + $('#imageCanvas').width()+10});
					//Parte inferior
					if( $('#image').position().top+$('#image').height() < $('#imageCanvas').position().top+$('#imageCanvas').height()+10)
						$('#image').offset({top: $('#imageCanvas').position().top - $('#image').height() + $('#imageCanvas').height()+10});
				}
			}); //Termina draggable
		}) //Termina document.ready
	</script> <!-- Script para desplazarse en el mapa -->
	<style>
		@import'Extras/uiTheme/jquery-ui-1.8.9.custom.css';
		h2{ color:#900; text-align:center; }
		map{ cursor:crosshair; }
		.mundoTable{
			width:550px;
			margin:auto;
			border-radius:10px;
			margin-bottom:10px;
		}
		img{ cursor:move; }
	</style>
</head>
<body>
	<h2>Mundo HunabKu</h2>
		<table class='mundoTable'>
		<thead><tr><th>ID</th><th>Colonia</th><th>Civilizacion / Personalidad</th><th>Tierra</th></tr></thead>
		<tbody>
		<?PHP
			foreach($colonias as $imperio){
/*				echo"
	<table class='mundoTable'>
		<thead><tr><th>ID</th><th>Colonia</th><th>Civilizacion / Personalidad</th><th>Tierra</th></tr></thead>
		<tbody>"; */
				foreach($imperio as $colonia){
					echo'<tr>
			<td>'.$colonia->ID.'</td>
			<td>'.$colonia->Colonia.'</td>
			<td>'.$colonia->Civil.' / '.$colonia->Pers.'</td>
			<td>'.$colonia->Tierra.'</td>
			</tr>';
				}
/*				echo"
		</tbody>
	</table>";*/
			}
		?>
	</tbody>
	</table>
</body>
</html>